<template>
  <q-dialog
    v-model="visible"
    persistent
    maximized
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card
      class="full-height"
      style="
        background: transparent;
        backdrop-filter: blur(10px) brightness(20%);
        border-radius: 1rem;
      "
    >
      <q-bar
        class="full-width justify-end bg-transparent"
        style="height: 50px; line-height: 50px"
      >
        <q-btn
          round
          flat
          :color="color"
          icon="close"
          size="20px"
          v-close-popup
        />
      </q-bar>
      <q-card-section
        class="row justify-center items-center content-center"
        style="height: calc(100vh - 50px)"
      >
        <q-spinner-rings :color="color" size="20rem" />
        <q-card-section
          class="row text-center justify-center q-gutter-md"
          :class="'text-' + color"
        >
          <div class="text-h3 text-bold full-width">
            {{ $t(lang + "充电中") }}
          </div>
          <div class="text-h4 full-width">
            {{ $t(lang + "当前电量为") }}{{ battery }}%
          </div>
        </q-card-section>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";

defineProps({
  battery: { type: Number, default: -1 }, //  电量数值
  color: { type: String, default: "green-13" }, //  颜色
});
const lang = "indexPage.chargingDialog.";
const visible = ref(false);
defineExpose({ visible });
</script>
